<template>
	<view>
		<view class="wrap">
			<view>
				<text class="title" v-if="item.title">{{item.title}}</text>
			</view>
			<view class="msg-wrap">
				<rich-text :nodes="item.content" class="msg"></rich-text>
				<view v-if="item.status == 0" class="reMoney" @tap="go_refund">退款规则</view>
			</view>
			<view class="about-refund" v-if="item.status == 0 && showRefund">
				<view class="msg">
					<rich-text :nodes="refund_content"></rich-text>
				</view>
			</view>
		</view>
		<!-- <text class="msg">课程简介课程优点，解决学生什么问题，帮助学生。课程简介课程优点，解决学生什么问题，帮助学生什么。</text> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showRefund: false,
				refund_content: null
			}
		},
		props: {
			item: Object
		},
		methods: {
			go_refund() {
				/**数据请求较慢，如若第一次请求数据dom没更新时调用this.showRefund = !this.showRefund
					会导致富文本渲染一个null的refund_content
				*/
				if (!this.refund_content) {
					this.$zbapi.apiPost('stu/course/refund/info').then(res => {
						if (res.data.code == 0) {
							this.refund_content = res.data.data.content
							this.showRefund = !this.showRefund
						}
					})
				} else {
					this.showRefund = !this.showRefund
				}
			}
		}
	}
</script>

<style scoped>
	.wrap {
		padding: 30upx;
	}

	.title {
		font-size: 32upx;
		color: #999;
		line-height: 54upx;
	}

	.msg,
	.reMoney {
		font-size: 32upx;
		color: #333;
		line-height: 48upx;
	}

	.reMoney {
		color: #FF9900;
		text-decoration: underline;
	}

	.about-refund {
		width: 640upx;
		margin: 0 auto;
	}

	.about-refund .msg {
		width: 100%;
		font-size: 28upx;
		color: #ababab;
	}
</style>
